<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<head>
  <title>aiipc</title>
  <script src="./ZLMRTCClient.js"></script>
  <script src="./vconsole.min.js"></script>
  <script>
    // VConsole will be exported to `window.VConsole` by default.
    var vConsole = new window.VConsole();
  </script>
  <style>
    video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background-color: grey;
      /* 完全禁用所有用户交互 */
      pointer-events: none !important;
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      user-select: none !important;

      /* 隐藏所有浏览器默认控制条 */
      &::-webkit-media-controls-panel,
      &::-webkit-media-controls-play-button,
      &::-webkit-media-controls-start-playback-button,
      &::-webkit-media-controls-timeline,
      &::-webkit-media-controls-current-time-display,
      &::-webkit-media-controls-time-remaining-display,
      &::-webkit-media-controls-mute-button,
      &::-webkit-media-controls-volume-slider,
      &::-webkit-media-controls-fullscreen-button {
        display: none !important;
      }
    }

    #video-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1;
    }

    #sdp-display {
      display: none;
      position: fixed;
      top: 40px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 99999;
      color: white;
      padding: 12px 20px;
      font-family: monospace;
      font-size: 14px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      pointer-events: none;
    }

    .button-container {
      position: fixed;
      bottom: 20px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 20px;
      z-index: 1000;
    }

    .button-container button {
      background: #07C160;
      color: white;
      border-radius: 25px;
      padding: 12px 24px;
      font-size: 16px;
      border: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      transition: all 0.2s;
    }

    .button-container button:active {
      transform: scale(0.95);
      opacity: 0.9;
    }

    .control-buttons {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 2;
      display: flex;
      gap: 10px;
    }

    /* 流显示提示 */
    #current-stream-indicator {
      position: fixed;
      top: 10px;
      left: 0;
      right: 0;
      text-align: center;
      color: white;
      font-size: 14px;
      z-index: 1000;
      font-family: sans-serif;
      text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    }

    @media (max-width: 768px),
    (orientation: portrait) {
      .button-container {
        position: fixed !important;
        bottom: 10% !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        z-index: 100000 !important;
        padding: 10px 0;
      }

      .control-buttons {
        top: 15vh !important;
        left: 20px !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        flex-direction: column !important;
        width: auto !important;
        max-width: 120px !important;
        gap: 15px !important;
        z-index: 99999 !important;
      }

      .control-buttons button {
        background: #07C160 !important;
        color: white !important;
        border-radius: 25px !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        min-width: 110px !important;
        margin: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        border: none !important;
        transition: all 0.2s;
        position: relative;
        overflow: hidden;
      }

      .control-buttons button::before {
        content: '';
        position: absolute;
        left: 15px;
        width: 20px;
        height: 20px;
        background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>');
      }

      .control-buttons button:last-child::before {
        background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 14H8V8h8v8z"/></svg>');
      }

      .control-buttons button:active {
        transform: scale(0.95);
        opacity: 0.9;
      }

      /* 隐藏vConsole的logo */
      .vc-logo {
        display: none !important;
      }
    }
  </style>
</head>

<body>
  <div id="video-container">
    <video id='video' autoplay>
      Your browser is too old which doesn't support HTML5 video.
    </video>
  </div>

  <div id="sdp-display"></div>

  <!-- ✅ 当前流提示 -->
  <div id="current-stream-indicator">当前流: <span id="current-stream">未知</span></div>

  <div class="control-buttons"></div>
  <div class="button-container">
    <button onclick="start()">开始(start)</button>
    <button onclick="stop()">停止(stop)</button>
    <!-- ✅ 摄像头切换按钮 -->
    <button onclick="selectStream('test0')">摄像头 0</button>
    <button onclick="selectStream('test1')">摄像头 1</button>
    <button onclick="selectStream('test2')">摄像头 2</button>
    <button onclick="selectStream('test3')">摄像头 3</button>
  </div>

  <script>
    var player = null;
    var recvOnly = true;
    var resArr = [];

    const searchParams = new URL(document.location.href).searchParams;
    let type = searchParams.get('type');
    if (!['echo', 'push', 'play'].includes(type)) {
      type = 'play';
    }
    recvOnly = type === 'play';

    // ✅ 默认 stream=test0
    const app = searchParams.get('app') ?? 'live';
    const stream = searchParams.get('stream') ?? 'test0';
    const apiPath = `/index/api/webrtc?app=${app}&stream=${stream}&type=${type}`;
    const apiHost = `${document.location.protocol}//${window.location.host}`;
    const url = apiHost + apiPath;

    // ✅ 显示当前流
    document.getElementById('current-stream').textContent = stream;

    function start_play() {
      player = new ZLMRTCClient.Endpoint({
        element: document.getElementById('video'),
        debug: true,
        zlmsdpUrl: url,
        simulcast: false,
        useCamera: false,
        audioEnable: true,
        videoEnable: true,
        recvOnly: recvOnly,
        usedatachannel: false
      });

      // 显示SDP信息
      const sdpDisplay = document.getElementById('sdp-display');
      sdpDisplay.textContent = player.zlmsdpUrl;
      sdpDisplay.style.display = 'block';

      player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, console.log);
      player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, s => console.log('播放成功', s));
      player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, e => {
        console.log('offer交换失败', e);
        stop();
      });
      player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, s => {
        document.getElementById('selfVideo').srcObject = s;
      });
    }

    function handlePlayError(error) {
      console.error('播放失败:', error);
      alert('播放失败: ' + (error.response?.data.message || error.message));
    }

    function start() {
      try {
        stop();
        start_play();
      } catch (error) {
        handlePlayError(error);
      }
    }

    function stop() {
      if (player) {
        player.close();
        player = null;
        const remote = document.getElementById('video');
        if (remote) remote.srcObject = null;
      }
      document.getElementById('sdp-display').style.display = 'none';
    }

    // ✅ 切换流函数
    function selectStream(streamName) {
      // 更新 URL 参数（不刷新页面）
      const url = new URL(window.location);
      url.searchParams.set('stream', streamName);
      window.history.replaceState({}, '', url);

      // 更新显示
      document.getElementById('current-stream').textContent = streamName;

      // 停止并重新开始
      stop();
      setTimeout(start, 150); // 稍微延迟确保关闭

      console.log(`已切换到流: ${streamName}`);
    }
  </script>
</body>
</html>



